
var drawcolors=[0,1,2,3,4,5,6,7,8,9,10];
const COLORS={
    "0":'black',
    "1":"#FF2E10",
    "2":"#FB8D15",
    "3":"#F4ED1C",
    "4":"#C5F31D",
    "5":"#51F11F",
    "6":"#18F8F8",
    "7":"#1166FF",
    "8":"#9833DD",
    "9":"#FC14EB",
    "10":"#C64A6A"
}
var x;
var y;
var ctx;
var move_times=1;                         //控制移动次数
var o = 1;                      //控制透明度的变化
var R = 0.25;                      //绽放的圆的半径
var r_star = 5;                  //星星的边长
var r_triangle=14;                  //三角形的边长
var timer_star=null;                    //星星的定时器
var timer_triangle=null;                    //三角形的定时器
var timer_mix=null;
var timer_click=null;
var s= R*Math.cos(Math.PI/5);
var t= R*Math.sin(Math.PI/5);
var v= R*Math.cos(Math.PI/2.5);
var w= R*Math.sin(Math.PI/2.5);
var video_b =true;                  //控制音乐的循环播放及退出或后台隐藏时结束播放
var star_b=true;                    //控制星星的循环绘画，避免多次点击按钮时造成的加速
var mix_b=true;
var triangle_b=true;                //控制三角形的循环绘画，避免多次点击按钮时造成的加速
var click_b1=true;
var click_b2=true;
export default {
    data: {

    },

    onShow() {
        ctx = this.$refs.canvas.getContext('2d');
        this.$element('videoId').start();
    },

    onHide(){
    clearInterval(timer_star);
    timer_star=null;
    clearInterval(timer_triangle);
    timer_triangle=null;
    clearInterval(timer_mix);
    timer_mix=null;
    clearInterval(timer_click);
    timer_click=null;
    video_b=false;
    this.$element('videoId').pause();
    },

    onDestroy(){
        clearInterval(timer_star);
        timer_star=null;
        clearInterval(timer_triangle);
        timer_triangle=null;
        clearInterval(timer_mix);
        timer_mix=null;
        clearInterval(timer_click);
        timer_click=null;
        video_b=false;
        this.$element('videoId').pause();
    },

    /*控制音频的循环播放*/
    finishCallback:function(){
        if(video_b==true){
            this.$element('videoId').start();
        }
    },

    run_touch(){
        if(click_b2==true) {
            this.draw_Star(x, y, 0, 0, 0);    //保护clearRect
            ctx.clearRect(0, 0, 400, 800);
            this.Draw_Star_10(x, y, 1);
        }
    },

    touchstartfunc(msg) {
        click_b1==true;
        x=msg.touches[0].globalX;
        y=msg.touches[0].globalY;
        if(click_b1==true){
        timer_click=setInterval(this.run_touch,120);
            click_b1=false;
            timer_click=null;
        }
    },

    click_star(){
        click_b2=false;
        clearInterval(timer_triangle);
        timer_triangle=null;
        clearInterval(timer_mix);
        timer_mix=null;
        ctx.clearRect(0,0,400,800);
        if(star_b==true){
        timer_star=setInterval(this.run_star,120);
        star_b=false;
        }
        triangle_b=true;
        mix_b=true;
    },

    click_triangle(){
        click_b2=false;
        clearInterval(timer_star);
        timer_star=null;
        clearInterval(timer_mix);
        timer_mix=null;
        ctx.clearRect(0,0,400,800);
        if(triangle_b==true){
            timer_triangle=setInterval(this.run_triangle,120);
            triangle_b=false;
        }
        star_b=true;
        mix_b=true;
    },

    click_mix(){
        click_b2=false;
        clearInterval(timer_star);
        timer_star=null;
        clearInterval(timer_triangle);
        timer_triangle=null;
        ctx.clearRect(0,0,400,800);
        if(mix_b==true){
            timer_mix=setInterval(this.run_mix,120);
            mix_b=false;
        }
        star_b=true;
        triangle_b=true;
    },

   run_star(){
       /*用来保护函数clearRect(),让画面更流畅*/
       this.draw_Star(0,0,0,0,0,0);
       ctx.clearRect(0,0,400,800);

       this.Draw_Star_10(200,300,1);
       this.Draw_Star_10(150,200,2);
       this.Draw_Star_8(300,218);
       this.Draw_Star_8(110,380);
    },

    Draw_Star_8(click_x,click_y){

        this.draw_Star(click_x,click_y,1,-R,0,Math.floor(Math.random()*2 + 1));
        this.draw_Star(click_x,click_y,2,-R/Math.sqrt(2),-R/Math.sqrt(2),Math.floor(Math.random()*2 + 1));
        this.draw_Star(click_x,click_y,3,0,-R,Math.floor(Math.random()*2 + 1));
        this.draw_Star(click_x,click_y,4,R/Math.sqrt(2),-R/Math.sqrt(2),Math.floor(Math.random()*2 + 1));
        this.draw_Star(click_x,click_y,5,R,0,Math.floor(Math.random()*2 + 1));
        this.draw_Star(click_x,click_y,6,R/Math.sqrt(2),R/Math.sqrt(2),Math.floor(Math.random()*2 + 1));
        this.draw_Star(click_x,click_y,7,0,R,Math.floor(Math.random()*2 + 1));
        this.draw_Star(click_x,click_y,8,-R/Math.sqrt(2),R/Math.sqrt(2),Math.floor(Math.random()*2 + 1));
    },

    Draw_Star_10(click_x,click_y,fill){

        this.draw_Star(click_x,click_y,Math.floor(Math.random()*10 + 1),-R,0,fill);
        this.draw_Star(click_x,click_y,Math.floor(Math.random()*10 + 1),-s,-t,fill);
        this.draw_Star(click_x,click_y,Math.floor(Math.random()*10 + 1),-v,-w,fill);
        this.draw_Star(click_x,click_y,Math.floor(Math.random()*10 + 1),v,-w,fill);
        this.draw_Star(click_x,click_y,Math.floor(Math.random()*10 + 1),s,-t,fill);
        this.draw_Star(click_x,click_y,Math.floor(Math.random()*10 + 1),R,0,fill);
        this.draw_Star(click_x,click_y,Math.floor(Math.random()*10 + 1),s,t,fill);
        this.draw_Star(click_x,click_y,Math.floor(Math.random()*10 + 1),v,w,fill);
        this.draw_Star(click_x,click_y,Math.floor(Math.random()*10 + 1),-v,w,fill);
        this.draw_Star(click_x,click_y,Math.floor(Math.random()*10 + 1),-s,t,fill);
    },

    draw_Star(x_1,y_1,color,x_2,y_2,fill) {
        if(move_times==342){
            o=1;
            ctx.globalAlpha = o;
            move_times=1;
        };

        let x = x_1 + move_times * x_2;
        let y = y_1 + move_times * y_2;
        /* 画星星边缘 */
        let a = r_star * Math.sin(Math.PI / 10);
        let b = r_star * Math.cos(Math.PI / 10);
        let c = (r_star + a) * Math.tan(Math.PI / 10);
        let d = (r_star + a) * Math.tan(Math.PI / 5) - c;
        let e = r_star * Math.sin(Math.PI / 5);
        let f = r_star * Math.cos(Math.PI / 5);
        let g = (r_star + 2 * a) * Math.cos(2 * Math.PI / 5);
        let h = (r_star + 2 * a) * Math.sin(2 * Math.PI / 5);
        /*实现星星的渐消失*/
        if ((move_times >= 230 && move_times <= 330)) {
            o = o - 0.01;
            ctx.globalAlpha = o;
        };
        ctx.lineWidth=1;
        ctx.strokeStyle = COLORS[drawcolors[color].toString()];
        ctx.beginPath();
        ctx.moveTo(x - r_star - a, y - c);
        ctx.lineTo(x - a, y - c);
        ctx.lineTo(x, y - b - c);
        ctx.lineTo(x + a, y - c);
        ctx.lineTo(x + a + r_star, y - c);
        ctx.lineTo(x + a + r_star - f, y + e - c);
        ctx.lineTo(x + a + g, y + h - c);
        ctx.lineTo(x, y + d);
        ctx.lineTo(x - a - g, y + h - c);
        ctx.lineTo(x - a - r_star + f, y + e - c);
        ctx.closePath();
        ctx.stroke();
        if(fill==2) {
            ctx.fillStyle = COLORS[drawcolors[color].toString()];
            ctx.fill();
        };
        move_times=move_times+1;
    },

    run_triangle(){
        /*用来保护函数clearRect(),让画面更流畅*/
        this.draw_Triangle(0,0,0,0,0,0);
        ctx.clearRect(0,0,400,800);

        this.Draw_Triangle_8(200,300,1);
        this.Draw_Triangle_8(150,200,2);
        this.Draw_Triangle_10(300,218);
        this.Draw_Triangle_10(110,380);
    },

    Draw_Triangle_8(click_x,click_y,fill){
        this.draw_Triangle(click_x,click_y,Math.floor(Math.random()*10 + 1),-R,             0,              fill);
        this.draw_Triangle(click_x,click_y,Math.floor(Math.random()*10 + 1),-R/Math.sqrt(2),-R/Math.sqrt(2),fill);
        this.draw_Triangle(click_x,click_y,Math.floor(Math.random()*10 + 1), 0,            -R,              fill);
        this.draw_Triangle(click_x,click_y,Math.floor(Math.random()*10 + 1), R/Math.sqrt(2),-R/Math.sqrt(2),fill);
        this.draw_Triangle(click_x,click_y,Math.floor(Math.random()*10 + 1), R,             0,              fill);
        this.draw_Triangle(click_x,click_y,Math.floor(Math.random()*10 + 1), R/Math.sqrt(2),R/Math.sqrt(2), fill);
        this.draw_Triangle(click_x,click_y,Math.floor(Math.random()*10 + 1), 0,             R,              fill);
        this.draw_Triangle(click_x,click_y,Math.floor(Math.random()*10 + 1),-R/Math.sqrt(2),R/Math.sqrt(2), fill);
    },

    Draw_Triangle_10(click_x,click_y){
        this.draw_Triangle(click_x,click_y,1,-R,0, Math.floor(Math.random()*2 + 1));
        this.draw_Triangle(click_x,click_y,2,-s,-t,Math.floor(Math.random()*2 + 1));
        this.draw_Triangle(click_x,click_y,3,-v,-w,Math.floor(Math.random()*2 + 1));
        this.draw_Triangle(click_x,click_y,4,v,-w, Math.floor(Math.random()*2 + 1));
        this.draw_Triangle(click_x,click_y,5,s,-t, Math.floor(Math.random()*2 + 1));
        this.draw_Triangle(click_x,click_y,6,R,0,  Math.floor(Math.random()*2 + 1));
        this.draw_Triangle(click_x,click_y,7,s,t,  Math.floor(Math.random()*2 + 1));
        this.draw_Triangle(click_x,click_y,8,v,w,  Math.floor(Math.random()*2 + 1));
        this.draw_Triangle(click_x,click_y,9,-v,w, Math.floor(Math.random()*2 + 1));
        this.draw_Triangle(click_x,click_y,10,-s,t,Math.floor(Math.random()*2 + 1));
    },

    draw_Triangle(x_1,y_1,color,x_2,y_2,fill){
        if(move_times==342){
            o=1;
            ctx.globalAlpha = o;
            move_times=1;
        };

        let x = x_1 + move_times * x_2;
        let y = y_1 + move_times * y_2;
        /* 画三角形边缘 */
        /*实现三角形的渐消失*/
        if ((move_times >= 230 && move_times <= 330)) {
            o = o - 0.01;
            ctx.globalAlpha = o;
        };
        ctx.lineWidth=1;
        ctx.strokeStyle = COLORS[drawcolors[color].toString()];
        ctx.beginPath();
        ctx.moveTo(x-r_triangle/2, y + Math.sqrt(3)*r_triangle/6);
        ctx.lineTo(x, y - Math.sqrt(3)*r_triangle/3);
        ctx.lineTo(x+r_triangle/2, y + Math.sqrt(3)*r_triangle/6);
        ctx.closePath();
        ctx.stroke();
        if(fill==2) {
            ctx.fillStyle = COLORS[drawcolors[color].toString()];
            ctx.fill();
        };
        move_times=move_times+1;
    },

    run_mix(){
        /*用来保护函数clearRect(),让画面更流畅*/
        this.draw_Triangle(0,0,0,0,0,0);
        ctx.clearRect(0,0,400,800);

        this.Draw_Triangle_8(200,300,1);
        this.Draw_Star_10(150,200,2);
        this.Draw_Triangle_10(300,218);
        this.Draw_Star_8(110,380);
    },
}
